<template>
  <div class="watch">
	<Header></Header> 
	<div class="w1000">
		<h1>watch</h1>
		<h2 class="red">{{watchShow}}</h2>
		<h2>{{watchshowModel}}</h2>	
	</div>

  </div>
</template>

<script>	
export default {
	data () {
		return {
			show : '',
			watchShow : '',
			showModel :'',
			watchshowModel : ''
		}
	},
	watch: {
		show : {
			handler(val){
				console.log(val);
				this.watchShow = val || '数据初始化...';
			},
			deep : true,
			immediate : true // 数据初始化立即加载
		},
		showModel : {
			handler(val){
				console.log(val);
				this.watchshowModel = val || 'watchshowModel 数据初始化...';
			},
			deep : true,
			immediate : true
		},
	},
	method: {
		
	},
	created() {
		let i=0;
		// this.show = '监听数据...'
		let timeShow = setInterval( () => {
			if(i <= 10) {
				this.show = '监听数据变化了' + i;
				i++;
				
			}else{
				clearInterval(timeShow);
			}

		},1000)
	}
}
</script>

<style lang="scss" scoped>
	.red {
		color: red;
	}
</style>